<template>
	<view class="">
		
		<view class="hp_page">

			<view class="Warehousing_info" style="position: relative;">				
						<uni-section title="货品图片">
							<view class="example-body ">
								<uni-file-picker readonly :value="fileLists" file-mediatype="image">
								</uni-file-picker>
							</view>
						</uni-section>
						</view>
				<view class="other_info" style="position: relative;">
					<text
						style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 12px;left: 0;"></text>
					<view class="title">
						<text style="font-size: 15px;font-weight: 600;line-height: 40px;">其他信息</text>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="">供货商姓名</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								王浩星
							</view>
						</view>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="">供货商电话</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
							   13839012708 <text style="margin-left: 10px;color: #fccc04;">一键拨打</text>
							</view>
						</view>
					</view>
					<view class="hp_name" style="border: 0;">
						<view class="hp_name-left">
							<view class="">货品价格</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								80
							</view>
						</view>
					</view>
					
				</view>
			    <text style="position: absolute;right: 10px;font-weight: 600;margin-top: 20px;">*需要购买可以直接联系供货商</text>
				
			</view>
		
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isState: false,
				img_path: [],
				url: '',
				imageStyles: {
					width: 64,
					height: 64,

				},
				hp_info_list: '',
				fileLists: [

				]
			}
		},
		onLoad(option) {
			console.log(option.xx);
			var hp_code = option.xx;
			uni.request({
					url: 'http://localhost:3000/query',
					data: {
						'hp_code': 6
					},
					success: (res) => {
						console.log(res.data);
						this.img_path = res.data;
						console.log(this.img_path[0].url);
						for (var i = 0; i < this.img_path.length; i++) {
							this.$set(this.fileLists, i, {
								url: `http://localhost:3000/${this.img_path[i].url}`
							});
						}
						console.log(this.fileLists)
					}
				}),
				uni.request({
					url: 'http://localhost:3000/query_hp_info',
					data: {
						'hp_code': hp_code
					},
					success: (res) => {
						console.log(res.data);
						this.hp_info_list = res.data[0];
						console.log(this.hp_info_list)
					}
				})
		},
		methods: {
			update_fn(){
				console.log(111);
				uni.navigateBack({
					delta: 1
				})
			},
			qiehuan_fn() {
				if (this.isState == true) this.isState = false
				else this.isState = true
			},
			dialogClose() {
				console.log('点击关闭')
			},
			delete_fn() {
				this.$refs.yyy.open()
			},
			sx_fn(){
				this.$refs.sx.open();
				this.$refs.xxx.close()
			},
			share_fn() {
				this.$refs.xxx.open();
			},
			close_fn() {
				this.$refs.xxx.close()
			},
			close() {
				this.$refs.yyy.close()
			},
			confirm() {
				this.$refs.yyy.close()
				console.log(this.hp_info_list.hp_code);
				uni.request({
					url: 'http://localhost:3000/delete_hp_info',
				    data:{
						hp_code:this.hp_info_list.hp_code
					},
					success: (res) => {
						console.log(res.data);
					}
				})
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.yyy.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogConfirm() {
				console.log('点击确认')
			}
		}

	}
</script>

<style lang="less">
	.hp_page {
		width: 100%;
		height: 744px;
		overflow: hidden;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 15px;

		.Warehousing_info {
			width: 700rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 10px;

			.hp_number {
				width: 100%;
				height: 60px;
				display: flex;
				position: relative;
				border-bottom: 1px solid gainsboro;

				.hp_number-left {
					width: 40%;
					margin-top: 10px;

				}
			}

			.Category-options {
				width: 100%;
				border-bottom: 1px solid gainsboro;

				.option {
					display: inline-block;
					height: 25px;
					border: 1px solid gray;
					margin: 7px;
					box-sizing: border-box;
					padding: 0 5px;
					color: gray;
					line-height: 25px;
					border-radius: 3px;
				}
			}
		}
	}

	.other_info {
		margin-top: 10px;
		width: 700rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.remarks {
		margin-top: 10px;
		width: 700rpx;
		height: 100px;
		background-color: white;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.hp_name {
		width: 100%;
		height: 40px;
		position: relative;
		display: flex;
		border-bottom: 1px solid gainsboro;

		.hp_name-left {
			width: 40%;
			line-height: 40px;
		}
	}

	.title {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid gainsboro;
	}

	.info_important {
		font-size: 14px;

		&::after {
			content: '*';
			color: red;
		}
	}
</style>
